<template>
  <div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="68px"
      v-show="showSearch"
    >
      <el-form-item label="品牌" prop="brandName">
        <!-- <el-input
          v-model="queryParams.brand"
          placeholder="请输入品牌"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.brand"
          placeholder="选择品牌"
          clearable
          filterable
        >
          <el-option
            v-for="dict in dict.type.sys_product_pp"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="供应商" prop="supplier">
        <!-- <el-input
          v-model="queryParams.supplier"
          placeholder="选择供应商"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.supplier"
          placeholder="选择供应商"
          clearable
          filterable
        >
          <el-option
            v-for="dict in dict.type.sys_product_coder"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="当前年份" prop="oneYear">
        <el-date-picker
          type="year"
          @change="changeTime"
          v-model="queryParams.oneYear"
          placeholder="选择当前年份"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="对比年份" prop="twoYear">
        <el-date-picker
          type="year"
          @change="changetwoYear"
          v-model="queryParams.twoYear"
          placeholder="选择对比年份"
        >
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="合同号" prop="contractNumber">
        <el-input
          v-model="queryParams.contractNumber"
          placeholder="请输入合同号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item class="flex_one tr">
        <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row class="mb8" :gutter="10">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出
        </el-button>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <!-- <u-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <u-table-column prop="brand" label="品牌" width="180"> </u-table-column>
      <u-table-column prop="month" label="月份"> </u-table-column> -->
    <u-table
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
      ref="plTreeTable"
      fixed-columns-roll
      header-drag-style
      :height="700"
      :treeConfig="{
        children: 'childrenList',
        iconClose: 'el-icon-folder-add',
        iconOpen: 'el-icon-folder-remove',
        expandAll: false,
      }"
      @toggle-tree-expand="toggleTreeExpand"
      use-virtual
      row-id="month"
      border
      :data="tableData"
      :expand-row-keys="expandId"
      row-key="month"
    >
      <!--
                :showDialogIcon="false"
              field-title="u-table选择显示字段"
              :field-sort="true"
              :dialog-data="dialogData"
                u-table大数据表格 你需要在列上指定某个列显示展开收起 treeNode属性 :width="220"-->
      <!-- <u-table-column prop="brand" label="品牌" width="180"> </u-table-column> -->
      <u-table-column :tree-node="true" prop="month" label="月份" />
      <u-table-column label="采购件数">
        <u-table-column
          prop="oneYearQuantity"
          :label="getoldyear(this.queryParams.oneYear)"
        >
        </u-table-column>
        <u-table-column
          prop="twoYearQuantity"
          :label="getoldyear(this.queryParams.twoYear)"
        >
        </u-table-column>
        <u-table-column prop="differentQuantity" label="差值"> </u-table-column>
        <u-table-column prop="quantityYoyStr" label="同比"> </u-table-column>
      </u-table-column>
      <u-table-column label="采购金额">
        <u-table-column
          prop="oneYearAmount"
          :label="getoldyear(this.queryParams.oneYear)"
        >
        </u-table-column>
        <u-table-column
          prop="twoYearAmount"
          :label="getoldyear(this.queryParams.twoYear)"
        >
        </u-table-column>
        <u-table-column prop="differentAmount" label="差值"> </u-table-column>
        <u-table-column prop="amountYoyStr" label="同比"> </u-table-column>
      </u-table-column>
    </u-table>
  </div>
</template>

<script>
import {
  listPurchaseBasicsDwd,
  getPurchaseBasicsDwd,
  delPurchaseBasicsDwd,
  addPurchaseBasicsDwd,
  updatePurchaseBasicsDwd,
  synData,
  selectConditionList,
  selectPurchaseMonth,
  selectPurchaseYear,
} from "@/api/purchase/PurchaseBasicsDwd";
import moment from "moment";
export default {
  dicts: [
    "sys_product_qudao",
    "sys_one_zero",
    "sys_product_size",
    "sys_sample_sf",
    "sys_jst_sample_sf",
    "sys_product_pp",
    "sys_product_coder",
  ],
  data() {
    return {
      expandId: [],
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        dataDate: null,
        brand: null,
        supplier: null,
        contractNumber: null,
        oneYear: moment(new Date()).format("YYYY"),
        twoYear: (new Date().getFullYear() - 1).toString(),
        contractType: "配件",
      },
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 收起展开时触发
    toggleTreeExpand(row, treeExpanded, event) {
      console.log(row, treeExpanded, event);
    },
    //对比年
    changetwoYear() {
      console.log(this.queryParams.twoYear);
      this.getList();
    },
    //当前年份
    changeTime() {
      console.log(this.queryParams.oneYear);
      this.getList();
    },
    getList() {
      this.queryParams.twoYear = moment(this.queryParams.twoYear).format(
        "YYYY"
      );
      this.queryParams.oneYear = moment(this.queryParams.oneYear).format(
        "YYYY"
      );
      if (this.queryParams.oneYear == this.queryParams.twoYear) {
        this.$modal.msgError("你选了相同年份对比");
        this.tableData = [];
        return;
      }
      selectPurchaseYear(this.queryParams).then((response) => {
        // this.tableData = response;
        let list = [];
        response.forEach((item) => {
          item.month = item.brand + "-" + item.month;
        });
        this.tableData = response;
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 13 === 0) {
          return {
            rowspan: 13,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    getoldyear(key) {
      const targetYear = moment(key).format("YYYY");
      //   console.log(JSON.stringify(targetYear));
      const result = `${targetYear}`;
      return result;
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      // this.pageReq.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.brand = null;
      this.queryParams.supplier = "";
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "purchase/PurchaseBasicsDwd/exportPurchaseYear",
        {
          ...this.queryParams,
        },
        `exportPurchaseYear_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>